<template>
  <div className="leftTop">
    <!--    柱状图-->
    <div id="leftTop" style="height: 4rem"></div>
  </div>
</template>

<script>

export default {
  name: "leftTop",
  mounted() {
    this.getdata();
  },
  data() {
    return {
      charts: "",
      // 图表数据
      opinionData: [],
    };
  },
  methods: {
    SetEchart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("leftTop"));
      //  处理数据
      let test = this.opinionData
      let data = []
      let name = []
      for(var key in test) {
        name.push(key);             //属性名（key）
        data.push(test[key]);       //属性值（value）
      }
      //将数据为0的置为null，不显示lable
      for(var item in data){
        for(var value in data[item]){
          if(data[item][value]==0){
            data[item][value]=null
          }
        }
      }
      // console.log(data)
      // console.log(name)
      var option = {
        title:{
              text:"测试通过率",
              align:'left',
              floating:true,
          textStyle:{
            color:"#CCFFFF",
            fontSize:this.refontSize(18),
            fontWeight:"bold"
          }
            },
        // darkMode:"auto",
        // startAngle:90,
        tooltip: {
          trigger: 'item',
          formatter: e => {
            return `
                ${e.name}<br/>
                用例数: ${e.data.value}个<br/>
                通过率: ${e.data.rate}%
            `
          }
        },
        angleAxis: {
          type: 'category',
          // 去掉边线
          axisLine: {
            show: false
          },
        },
        radiusAxis: {
          max: 100,
          // 去掉刻度线
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: false
          },
        },
        polar: {
          radius: [0, '60%']
        },
        series: [
          // 饼图
          {
            type: 'pie',
            radius: [0, '60%'],
            // startAngle:180,
            label: {
              color: '#CCFFFF',
              lineHeight: this.refontSize(14),
              formatter: e => {
                return `${e.name}\n用例数: ${e.data.value}个\n通过率: ${e.data.rate}%`
              }
            },
            labelLine: {
              length: 20,
              lineStyle: {
                color: '#999'
              }
            },
            itemStyle: {
              borderWidth: 1,
              borderColor: '#fff',
            },
            data: [
              {
                value: data[3][0],
                // 因为触发的是饼图的 tooltip，这里对应放极坐标的 data 值
                rate: (data[3][1]*100).toFixed(2),
                name: '手工测试',
                itemStyle: {
                  color: 'rgba(152, 234, 220, .4)',
                }
              },
              {
                value: data[2][0],
                rate: (data[2][1]*100).toFixed(2),
                name: '自动化测试',
                itemStyle: {
                  color: 'rgba(127, 229, 253, .4)',
                }
              },
              {
                value: data[1][0],
                rate: (data[1][1]*100).toFixed(2),
                name: '烤机测试',
                itemStyle: {
                  color: 'rgba(255, 20, 147, .4)',
                }
              },
              {
                value: data[0][0],
                rate: (data[0][1]*100).toFixed(2),
                name: '每日构建',
                itemStyle: {
                  color: 'rgba(255, 198, 93, .4)',
                }
              },
            ],
          },
          // 极坐标 - 玫瑰图
          {
            type: 'bar',
            name: '手工测试',
            // startAngle:180,
            max: 100, // 100 的比例
            data: [(data[3][1]*100).toFixed(2)], // 控制半径占比
            barWidth: (data[3][0] / (data[3][0]+data[2][0]+data[1][0]+data[0][0])) * 100 + '%', // 控制和饼图角度一致
            // barGap: 0,
            itemStyle: {
              color: '#a3ffc5',
              // shadowColor: '#000',
              // shadowBlur: 6
            },
            coordinateSystem: 'polar',
          }, {
            type: 'bar',
            name: '自动化测试',
            data: [(data[2][1]*100).toFixed(2)],
            max: 100,
            // barWidth:  (47 / 631) * 100+90 + '%',
            barWidth:  (data[2][0] / (data[3][0]+data[2][0]+data[1][0]+data[0][0])) * 100 + '%',
            barGap: 0,
            itemStyle: {
              color: '#7fe5fd',
              shadowColor: '#000',
              shadowBlur: 6
            },
            coordinateSystem: 'polar',
          }, {
            type: 'bar',
            name: '烤机测试',
            data: [(data[1][1]*100).toFixed(2)],
            max: 100,
            // barWidth:  (25 / 631) * 100 +90+ '%',
            barWidth:  (data[1][0] / (data[3][0]+data[2][0]+data[1][0]+data[0][0])) * 100 + '%',
            barGap: 0,
            itemStyle: {
              color: '#FF1493',
              shadowColor: '#000',
              shadowBlur: 6
            },
            coordinateSystem: 'polar',
          }, {
            type: 'bar',
            name: '每日构建',
            data: [(data[0][1]*100).toFixed(2)],
            max: 100,
            barWidth: (data[0][0] / (data[3][0]+data[2][0]+data[1][0]+data[0][0])) * 100 + '%',
            // barWidth: (0 / 631) * 100 +90+ '%',
            barGap: 0,
            itemStyle: {
              color: '#ffc65d',
              shadowColor: '#000',
              shadowBlur: 6
            },
            coordinateSystem: 'polar',
          }
        ],
      };

      myChart.setOption(option);
    },
    // 请求bug归属信息
    getdata(){
      this.$http({ method: 'get',
        url: 'show/testinfo/?system='+this.$route.query.project,}).then(response => {
            // console.log(response.data);
            this.opinionData =response.data;
            // 渲染
            this.SetEchart()
          },
      );
    }
  }
};
</script>

<style lang="scss" scoped>
</style>